﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body {
            padding: 0px;
            margin: 0px;
            background-image: url('./images/s0/s0-bg.jpg');
            background-repeat: no-repeat;
            overflow: hidden;
        }
    </style>
    <script src="./assets/echarts.min.js"></script>
    <script src="./assets/jquery.js"></script>
    <script src="./assets/jzcode.js"></script>
    <script src="./assets/jzcode.event.remote.js"></script>
</head>
<body>
    <canvas id="cavans1" style="position:absolute;top:0px; left:0px;" width='1920' height='1080'></canvas>
    <div id="container" style="position: absolute; top: 690px; left: 86px;  width:580px; height:350px;"></div>
    <script>
        var g_nodeSettings = [{
            mainPos: { x: 110, y: 155 },
            subPos: { x: 420, y: 60 },
            mainScale: 1.05,
            subScale: 1
        }, {
            mainPos: { x: 770, y: 60 },
            subPos: { x: 1020, y: 90 },
            mainScale: 1,
            subScale: 1
        }, {
            mainPos: { x: 629, y: 552 },
            subPos: { x: 780, y: 565 },
            mainScale: 1,
            subScale: 1
        }, {
            mainPos: { x: 1150, y: 360 },
            subPos: { x: 1250, y: 443 },
            mainScale: 0.95,
            subScale: 0.8
        }, {
            mainPos: { x: 70, y: 680 },
            subPos: { x: 70, y: 680 },
            mainScale: 1,
            subScale: 1
        }];
        var g_node_rudder = null;
        var g_node_rudder_big = null;
        var g_node_rudder_c1 = null;
        var g_node_rudder_c2 = null;
        var g_node_dipper0 = null;
        var g_node_dipper1 = null;
        function buildRudderNodes() {
            g_node_rudder = {
                show: true,
                rotateSpeed: Math.PI / 16,
                pos: { x: 40, y: 120 },
                size: { w: 134, h: 134 },
                scale: 1,
                bg: {
                    url: './images/s0/s0-rudder1.png'
                },
                id: 'popup-rudder',
                event: 'popup-rudder'
            };

            g_node_rudder_big = {
                show: false,
                rotateSpeed: 0,
                pos: { x: 35, y: 120 },
                size: { w: 378, h: 378 },
                scale: 1,
                bg: {
                    url: './images/s0/s0-rudder-big1.png'
                },
                id: 'select-rudder-big',
                event: 'select-rudder-big',
                tools: [{
                    show: true,
                    event: 'rudder-popup01',
                    pos: { x: 221, y: 120 },
                    subPos: { x: 221, y: 120 },
                    size: { w: 68, h: 64 },
                    bg: './images/s0/s0-rudder1-popup01.png',
                    bgSel: './images/s0/s0-rudder1-popup01-sel.png',
                    isSelected: false
                }, {
                    show: true,
                    event: 'rudder-popup02',
                    pos: { x: 222, y: 190 },
                    subPos: { x: 222, y: 190 },
                    size: { w: 68, h: 64 },
                    bg: './images/s0/s0-rudder1-popup02.png',
                    bgSel: './images/s0/s0-rudder1-popup02-sel.png',
                    isSelected: false
                }]
            };
            g_node_rudder_c1 = {
                show: false,
                rotateSpeed: 0,
                pos: { x: 100, y: 730 },
                size: { w: 530, h: 263 },
                scale: 1,
                bg: {
                    url: './images/s0/s0-rudder-popup01-c.png'
                }
            };
            g_node_rudder_c2 = {
                show: false,
                rotateSpeed: 0,
                pos: { x: 49, y: 294 },
                size: { w: 634, h: 738 },
                scale: 1,
                bg: {
                    url: './images/s0/s0-rudder-popup02-c.png'
                }
            };
            g_node_dipper0 = {
                show: true,
                rotateSpeed: 0,
                pos: { x: 1280, y: 110 },
                size: { w: 534, h: 194 },
                scale: 1,
                bg: {
                    url: './images/s0/layer-dipper0.png'
                }
            };
            g_node_dipper1 = {
                show: false,
                rotateSpeed: 0,
                pos: { x: 1496, y: 44 },
                size: { w: 368, h: 514 },
                scale: 1,
                bg: {
                    url: './images/s0/layer-dipper1.png'
                }
            };
        }

        buildRudderNodes();

        var g_isFullSize = true;
        var g_isPopup = false;
        var g_size = { w: 1920, h: 1680 };
        var g_dataList = [];
        var g_linkArr = [{ pos: { x: 582, y: 230 }, bg: './images/s0/link-bg.png' }, { pos: { x: 900, y: 260 }, bg: './images/s0/link-bg-selected.png' }];
        var g_nodeArr = [{
            show: true,
            event: 'select-wtsld',
            pos: { x: 110, y: 155 },
            size: { w: 560, h: 560 },
            rotateSpeed: Math.PI / 16, // 1s
            scale: 1.05,
            bg: {
                url: './images/s0/node-bg.png',
            },
            label: [{ pos: { x: 150, y: 110 }, url: './images/s0/wtsld-label.png' },
                { pos: { x: 250, y: 380 }, url: './images/s0/s0-label-ticket.png' }],
            data: {
                pos: { x: 0, y: 0, alignV: 'center', alignH: 'center' },
                url: 'http://172.30.13.36:8080/api/wtsld/total?name=order',
                value: 0
            },
            isSelected: false,
            tools: [{
                show: true,
                showWhen: 'always',
                pos: { x: 410, y: 30 },
                subPos: { x: 370, y: 20 },
                shape: 'circle',
                size: { w: 90, h: 90 },
                border: 5,
                icon: {
                    pos: { x: 0, y: 10, alignV: 'top', alignH: 'center' },
                    size: { w: 32, h: 32 },
                    bg: './images/s0/icon-warn.png'
                },
                data: {
                    pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                    url: 'http://172.30.13.36:8080/api/wtsld/total?name=warn',
                    value: 0
                }
            }, {
                showWhen: 'always',
                pos: { x: 500, y: 170 },
                subPos: { x: 480, y: 150 },
                shape: 'circle',
                size: { w: 80, h: 80 },
                border: 5,
                icon: {
                    pos: { x: 0, y: 5, alignV: 'top', alignH: 'center' },
                    size: { w: 38, h: 32 },
                    bg: './images/s0/icon-cust.png'
                },
                data: {
                    pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                    color: 'yellow',
                    url: 'http://172.30.13.36:8080/api/wtsld/total?name=cust',
                    value: 0
                }
            }, {
                show: true,
                event: 'chart-wtsld',
                pos: { x: -80, y: 260 },
                subPos: { x: -50, y: 260 },
                size: { w: 82, h: 72 },
                bg: './images/s0/s0-btn-chart.png',
                bgSel: './images/s0/s0-btn-chart-sel.png',
                isSelected: false
            }, {
                show: true,
                event: 'warn-wtsld',
                pos: { x: -60, y: 360 },
                subPos: { x: -30, y: 360 },
                size: { w: 79, h: 72 },
                bg: './images/s0/s0-btn-warn.png',
                bgSel: './images/s0/s0-btn-warn-sel.png',
                isSelected: false
            }, {
                show: true,
                event: 'top-wtsld',
                pos: { x: -20, y: 460 },
                subPos: { x: 30, y: 460 },
                size: { w: 71, h: 70 },
                bg: './images/s0/s0-btn-cust.png',
                bgSel: './images/s0/s0-btn-cust-sel.png',
                isSelected: false
            }]
        }, {
            show: true,
            pos: { x: 770, y: 60 },
            size: { w: 484, h: 484 },
            rotateSpeed: Math.PI / 16, // 1s
            scale: 1,
            bg: {
                url: './images/s0/node-bg.png',
            },
            label: [{ pos: { x: 120, y: 90 }, url: './images/s0/tg-label.png' },
                { pos: { x: 210, y: 340 }, url: './images/s0/s0-label-ticket.png' }],
            isSelected: false,
            data: {
                pos: { x: 0, y: 0, alignV: 'center', alignH: 'center' },
                url: 'http://172.30.13.36:8080/api/tg/total?name=order',
                value: 0
            },
            tools: [{
                show: false,
                showWhen: 'always',
                pos: { x: 320, y: 20 },
                shape: 'circle',
                size: { w: 100, h: 100 },
                border: 5,
                icon: {
                    pos: { x: 0, y: 10, alignV: 'top', alignH: 'center' },
                    size: { w: 32, h: 32 },
                    bg: './images/s0/icon-warn.png'
                },
                data: {
                    pos: { x: 0, y: 10, alignV: 'center', alignH: 'center' },
                    url: 'http://172.30.13.36:8080/api/tg/total?name=warn',
                    value: 0
                }
            }, {
                show: false,
                showWhen: 'always',
                pos: { x: 400, y: 140 },
                shape: 'circle',
                size: { w: 80, h: 80 },
                border: 5,
                icon: {
                    pos: { x: 0, y: 5, alignV: 'top', alignH: 'center' },
                    size: { w: 38, h: 32 },
                    bg: './images/s0/icon-cust.png'
                },
                data: {
                    pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                    color: 'yellow',
                    url: 'http://172.30.13.36:8080/api/tg/total?name=cust',
                    value: 0
                }
            }, {
                event: 'chart-tg',
                pos: { x: -80, y: 210 },
                size: { w: 87, h: 77 },
                bg: './images/s0/tool-chart.png'
            }, {
                pos: { x: -60, y: 300 },
                size: { w: 77, h: 70 },
                bg: './images/s0/tool-warn.png'
            }, {
                pos: { x: -20, y: 380 },
                size: { w: 83, h: 71 },
                bg: './images/s0/tool-top.png'
            }]
        }, {
            show: true,
            pos: { x: 629, y: 552 },
            size: { w: 492, h: 492 },
            rotateSpeed: Math.PI / 16, // 1s
            scale: 1,
            bg: {
                url: './images/s0/node-bg.png',
            },
            label: [{ pos: { x: 125, y: 85 }, url: './images/s0/zc-label.png' },
                { pos: { x: 214, y: 340 }, url: './images/s0/s0-label-ticket.png' }],
            data: {
                pos: { x: 0, y: 0, alignV: 'center', alignH: 'center' },
                url: 'http://172.30.13.36:8080/api/zc/total?name=order',
                value: 0
            },
            isSelected: false,
            tools: [{
                show: false,
                showWhen: 'always',
                pos: { x: 310, y: 10 },
                shape: 'circle',
                size: { w: 100, h: 100 },
                border: 5,
                icon: {
                    pos: { x: 0, y: 10, alignV: 'top', alignH: 'center' },
                    size: { w: 32, h: 32 },
                    bg: './images/s0/icon-warn.png'
                },
                data: {
                    pos: { x: 0, y: 10, alignV: 'center', alignH: 'center' },
                    url: 'http://172.30.13.36:8080/api/zc/total?name=warn',
                    value: 0
                }
            }, {
                show: false,
                showWhen: 'always',
                pos: { x: 400, y: 120 },
                shape: 'circle',
                size: { w: 80, h: 80 },
                border: 5,
                icon: {
                    pos: { x: 0, y: 5, alignV: 'top', alignH: 'center' },
                    size: { w: 38, h: 32 },
                    bg: './images/s0/icon-cust.png'
                },
                data: {
                    pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                    url: 'http://172.30.13.36:8080/api/zc/total?name=cust',
                    color: 'yellow',
                    value: 0
                }
            }, {
                event: 'chart-zc',
                pos: { x: -80, y: 210 },
                size: { w: 87, h: 77 },
                bg: './images/s0/tool-chart.png'
            }, {
                pos: { x: -60, y: 300 },
                size: { w: 77, h: 70 },
                bg: './images/s0/tool-warn.png'
            }, {
                pos: { x: -20, y: 380 },
                size: { w: 83, h: 71 },
                bg: './images/s0/tool-top.png'
            }]
        }, {
            show: true,
            pos: { x: 1150, y: 360 },
            size: { w: 694, h: 694 },
            rotateSpeed: Math.PI / 16, // 1s
            scale: 0.95,
            bg: {
                url: './images/s0/node-bg.png',
            },
            label: [{ pos: { x: 225, y: 142 }, url: './images/s0/s0-label-dg.png' },
                { pos: { x: 315, y: 460 }, url: './images/s0/s0-label-ticket.png' }],
            data: {
                pos: { x: 0, y: 0, alignV: 'center', alignH: 'center' },
                url: 'http://172.30.13.36:8080/api/dg/total?name=order',
                value: 0
            },
            isSelected: false,
            tools: [{
                show: false,
                showWhen: 'always',
                pos: { x: 570, y: 150 },
                subPos: { x: 500, y: 150 },
                shape: 'circle',
                size: { w: 80, h: 80 },
                border: 5,
                icon: {
                    pos: { x: 0, y: 5, alignV: 'top', alignH: 'center' },
                    size: { w: 38, h: 32 },
                    bg: './images/s0/icon-cust.png'
                },
                data: {
                    pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                    url: 'http://172.30.13.36:8080/api/dg/total?name=cust',
                    color: 'yellow',
                    value: 0
                }
            }, {
                show: false,
                event: 'chart-dg',
                pos: { x: -70, y: 360 },
                subPos: { x: -10, y: 360 },
                size: { w: 87, h: 77 },
                bg: './images/s0/tool-chart.png'
            }, {
                show: false,
                pos: { x: -50, y: 470 },
                subPos: { x: 10, y: 450 },
                size: { w: 77, h: 70 },
                bg: './images/s0/tool-warn.png'
            }, {
                show: false,
                pos: { x: 0, y: 560 },
                subPos: { x: 60, y: 520 },
                size: { w: 83, h: 71 },
                bg: './images/s0/tool-top.png'
            }]
        }, {
            show: true,
            pos: { x: 70, y: 680 },
            size: { w: 614, h: 358 },
            rotateSpeed: 0, // 1s
            scale: 1,
            bg: {
                url: './images/s0/popup-bg.png',
            },
            isSelected: false,
            tools: [{
                show: true,
                id: 'popup-close',
                event: 'popup-close',
                showWhen: 'always',
                pos: { x: 574, y: 0 },
                size: { w: 87, h: 77 },
                bg: './images/s0/popup-close.png'
            }],
            condition: function () {
                return g_isPopup;
            }
        }, g_node_rudder_c1, g_node_rudder_c2, g_node_rudder, g_node_rudder_big, g_node_dipper0, g_node_dipper1];
        var _cxt = null;
        var g_linkBgArr = [];
        var g_nodeBgArr = [];
        var _num = 0;
        var g_interval = 30;

        var ticks = 1000000;
        function init() {
            _cxt = document.getElementById('cavans1').getContext("2d");

            for (var index = 0; index < g_linkArr.length; index++) {
                var linkBg = new Image();
                linkBg.src = g_linkArr[index].bg;
                g_linkBgArr.push(linkBg);
            }
            for (var index = 0; index < g_nodeArr.length; index++) {
                var bg = new Image();
                bg.src = g_nodeArr[index].bg.url;
                g_nodeBgArr.push(bg);

                if (g_nodeArr[index].label) {
                    for (var indexOfLabel = 0; indexOfLabel < g_nodeArr[index].label.length; indexOfLabel++) {
                        var label = new Image();
                        label.src = g_nodeArr[index].label[indexOfLabel].url;
                        g_nodeArr[index].label[indexOfLabel].bgTex2D = label;
                    }
                }

                if (g_nodeArr[index].tools) {
                    for (var indexOfTool = 0; indexOfTool < g_nodeArr[index].tools.length; indexOfTool++) {
                        if (g_nodeArr[index].tools[indexOfTool].bgSel) {
                            var selBg = new Image();
                            selBg.src = g_nodeArr[index].tools[indexOfTool].bgSel;
                            g_nodeArr[index].tools[indexOfTool].tex2DSel = selBg;
                        }
                        var bg = new Image();
                        bg.src = g_nodeArr[index].tools[indexOfTool].bg;
                        g_nodeArr[index].tools[indexOfTool].tex2D = bg;

                        if (g_nodeArr[index].tools[indexOfTool].icon) {
                            var tex2DIcon = new Image();
                            tex2DIcon.src = g_nodeArr[index].tools[indexOfTool].icon.bg;
                            g_nodeArr[index].tools[indexOfTool].icon.bgTex2D = tex2DIcon
                        }
                    }
                }
            }

            for (var index = 0; index < g_nodeArr.length; index++) {
                if (g_nodeArr[index].data) {
                    g_dataList.push({ tag: g_nodeArr[index].data, url: g_nodeArr[index].data.url, waiting: 3600000, isLoading: false });
                }
                if (g_nodeArr[index].tools) {
                    for (var indexOfTool = 0; indexOfTool < g_nodeArr[index].tools.length; indexOfTool++) {
                        if (g_nodeArr[index].tools[indexOfTool].data) {
                            g_dataList.push({ tag: g_nodeArr[index].tools[indexOfTool].data, url: g_nodeArr[index].tools[indexOfTool].data.url, waiting: 3600000, isLoading: false });
                        }
                    }
                }
            }

            window.setInterval(function () {
                Render();
                DataLoop(g_interval);
            }, g_interval);
        }

        $(document).ready(function () {
            $(document).on('click', function (event) {
                var isHandle = false;
                for (var index = 0; index < g_nodeArr.length; index++) {
                    if (g_nodeArr[index].show && g_nodeArr[index].tools) {
                        for (var indexOfTool = 0; indexOfTool < g_nodeArr[index].tools.length; indexOfTool++) {
                            var toolPos = { x: 0, y: 0 };
                            if (!g_isFullSize && g_nodeArr[index].tools[indexOfTool].subPos) {
                                toolPos.x = g_nodeArr[index].tools[indexOfTool].subPos.x;
                                toolPos.y = g_nodeArr[index].tools[indexOfTool].subPos.y;
                            } else {
                                toolPos.x = g_nodeArr[index].tools[indexOfTool].pos.x;
                                toolPos.y = g_nodeArr[index].tools[indexOfTool].pos.y;
                            }

                            if (g_nodeArr[index].tools[indexOfTool].show
                                && g_nodeArr[index].tools[indexOfTool].event
                                && jzcode.h5.gtool.containsXYWHXY(g_nodeArr[index].pos.x + toolPos.x,
                                g_nodeArr[index].pos.y + toolPos.y,
                                g_nodeArr[index].tools[indexOfTool].size.w,
                                g_nodeArr[index].tools[indexOfTool].size.h,
                                event.pageX,
                                event.pageY)) {
                                //alert(g_nodeArr[index].tools[indexOfTool].bg);
                                console.log(g_nodeArr[index].tools[indexOfTool].event);
                                jzcode.event.sendEvent(g_nodeArr[index].tools[indexOfTool].event, null);

                                isHandle = true;
                                break;
                            }
                        }
                    }
                }

                if (isHandle == false) {
                    for (var index = g_nodeArr.length - 1; index >= 0; index--) {
                        if (g_nodeArr[index].show
                            && g_nodeArr[index].event
                            && jzcode.h5.gtool.containsPSXY(g_nodeArr[index].pos, g_nodeArr[index].size, event.pageX, event.pageY)) {
                            console.log(g_nodeArr[index].event);
                            jzcode.event.sendEvent(g_nodeArr[index].event, null);
                            isHandle = true;
                            break;
                        }
                    }
                }
            });
        });
        init();

        function GotoMainMode() {
            g_isFullSize = true;
            closeChart();
            for (var index = 0; index < g_nodeSettings.length; index++) {
                g_nodeArr[index].pos.x = g_nodeSettings[index].mainPos.x;
                g_nodeArr[index].pos.y = g_nodeSettings[index].mainPos.y;
                g_nodeArr[index].scale = g_nodeSettings[index].mainScale;
            }
            g_isPopup = false;
            g_node_rudder.show = true;
            g_node_rudder_big.show = false;
            g_node_dipper0.show = true;
            g_node_dipper1.show = false;
        }

        function GotoSubMode() {
            g_isFullSize = false;
            for (var index = 0; index < g_nodeSettings.length; index++) {
                g_nodeArr[index].pos.x = g_nodeSettings[index].subPos.x;
                g_nodeArr[index].pos.y = g_nodeSettings[index].subPos.y;
                g_nodeArr[index].scale = g_nodeSettings[index].subScale;
            }
            g_node_rudder.show = false;
            g_node_rudder_big.show = true;
            g_node_dipper0.show = false;
            g_node_dipper1.show = true;
        }

        function Render() {
            _num++;
            ticks++;
            _cxt.clearRect(0, 0, g_size.w, g_size.h);

            if (g_isFullSize) {
                _cxt.drawImage(g_linkBgArr[0], g_linkArr[0].pos.x, g_linkArr[0].pos.y);
            } else {
                _cxt.drawImage(g_linkBgArr[1], g_linkArr[1].pos.x, g_linkArr[1].pos.y);
            }

            // 绘制z=-1的tool
            for (var index = 0; index < g_nodeArr.length; index++) {
                if (g_nodeArr[index].condition && !g_nodeArr[index].condition()) {
                    continue;
                }
                if (!g_nodeArr[index].show || !g_nodeArr[index].tools) {
                    continue;
                }

                for (var indexOfTool = 0 ; indexOfTool < g_nodeArr[index].tools.length; indexOfTool++) {
                    if (g_nodeArr[index].tools[indexOfTool].show == false
                        || (g_nodeArr[index].tools[indexOfTool].showWhen != 'always' && !g_nodeArr[index].isSelected)) {
                        continue;
                    }
                    if (g_nodeArr[index].tools[indexOfTool].z != -1) {
                        continue;
                    }

                    var toolPos = { x: 0, y: 0 };
                    if (!g_isFullSize && g_nodeArr[index].tools[indexOfTool].subPos) {
                        toolPos.x = g_nodeArr[index].tools[indexOfTool].subPos.x;
                        toolPos.y = g_nodeArr[index].tools[indexOfTool].subPos.y;
                    } else {
                        toolPos.x = g_nodeArr[index].tools[indexOfTool].pos.x;
                        toolPos.y = g_nodeArr[index].tools[indexOfTool].pos.y;
                    }

                    if (g_nodeArr[index].tools[indexOfTool].bg) {
                        if (g_nodeArr[index].tools[indexOfTool].bgSel
                            && g_nodeArr[index].tools[indexOfTool].isSelected) {
                            _cxt.drawImage(g_nodeArr[index].tools[indexOfTool].tex2DSel,
                                g_nodeArr[index].pos.x + toolPos.x,
                                g_nodeArr[index].pos.y + toolPos.y);
                        } else {
                            _cxt.drawImage(g_nodeArr[index].tools[indexOfTool].tex2D,
                                g_nodeArr[index].pos.x + toolPos.x,
                                g_nodeArr[index].pos.y + toolPos.y);
                        }
                    }
                }
            }

            for (var index = 0; index < g_nodeArr.length; index++) {
                if (g_nodeArr[index].condition && !g_nodeArr[index].condition()) {
                    continue;
                }
                if (!g_nodeArr[index].show) {
                    continue;
                }
                _cxt.save();
                _cxt.translate(g_nodeArr[index].pos.x, g_nodeArr[index].pos.y);
                _cxt.translate(g_nodeArr[index].size.w / 2, g_nodeArr[index].size.h / 2);
                _cxt.rotate(_num * g_nodeArr[index].rotateSpeed / 1000 * g_interval);
                _cxt.scale(g_nodeArr[index].scale, g_nodeArr[index].scale);
                _cxt.translate(-g_nodeArr[index].size.w / 2, -g_nodeArr[index].size.h / 2);
                _cxt.drawImage(g_nodeBgArr[index], 0, 0, g_nodeArr[index].size.w, g_nodeArr[index].size.h);
                _cxt.restore();
            }

            // render tool
            for (var index = 0; index < g_nodeArr.length; index++) {
                if (g_nodeArr[index].condition && !g_nodeArr[index].condition()) {
                    continue;
                }
                if (!g_nodeArr[index].show) {
                    continue;
                }
                if (g_nodeArr[index].tools) {
                    for (var indexOfTool = 0 ; indexOfTool < g_nodeArr[index].tools.length; indexOfTool++) {
                        if (g_nodeArr[index].tools[indexOfTool].z == -1
                            || g_nodeArr[index].tools[indexOfTool].show == false
                            || (g_nodeArr[index].tools[indexOfTool].showWhen != 'always'
                            && !g_nodeArr[index].isSelected)) {
                            continue;
                        }

                        var toolPos = { x: 0, y: 0 };
                        if (!g_isFullSize && g_nodeArr[index].tools[indexOfTool].subPos) {
                            toolPos.x = g_nodeArr[index].tools[indexOfTool].subPos.x;
                            toolPos.y = g_nodeArr[index].tools[indexOfTool].subPos.y;
                        } else {
                            toolPos.x = g_nodeArr[index].tools[indexOfTool].pos.x;
                            toolPos.y = g_nodeArr[index].tools[indexOfTool].pos.y;
                        }

                        if (g_nodeArr[index].tools[indexOfTool].bg) {
                            if (g_nodeArr[index].tools[indexOfTool].bgSel
                                && g_nodeArr[index].tools[indexOfTool].isSelected) {
                                _cxt.drawImage(g_nodeArr[index].tools[indexOfTool].tex2DSel,
                                    g_nodeArr[index].pos.x + toolPos.x,
                                    g_nodeArr[index].pos.y + toolPos.y);
                            } else {
                                _cxt.drawImage(g_nodeArr[index].tools[indexOfTool].tex2D,
                                    g_nodeArr[index].pos.x + toolPos.x,
                                    g_nodeArr[index].pos.y + toolPos.y);
                            }
                        } else {
                            if (g_nodeArr[index].tools[indexOfTool].shape == 'circle') {
                                _cxt.beginPath();
                                _cxt.arc(g_nodeArr[index].pos.x + toolPos.x + g_nodeArr[index].tools[indexOfTool].size.w / 2,
                                    g_nodeArr[index].pos.y + toolPos.y + g_nodeArr[index].tools[indexOfTool].size.h / 2,
                                    g_nodeArr[index].tools[indexOfTool].size.w / 2, 0, Math.PI * 2, true);
                                _cxt.closePath();
                                _cxt.fillStyle = 'rgba(13,22,63,1)';
                                _cxt.strokeStyle = 'rgba(0,246,255,1)';
                                _cxt.lineWidth = g_nodeArr[index].tools[indexOfTool].border;
                                _cxt.fill();
                                _cxt.stroke();
                            }
                        }

                        if (g_nodeArr[index].tools[indexOfTool].icon) {
                            // 存在icon
                            var pos = jzcode.h5.gtool.calcPosWHWH(g_nodeArr[index].tools[indexOfTool].icon.pos.alignH,
                                g_nodeArr[index].tools[indexOfTool].icon.pos.alignV,
                                g_nodeArr[index].tools[indexOfTool].icon.size.w,
                                g_nodeArr[index].tools[indexOfTool].icon.size.h,
                                g_nodeArr[index].tools[indexOfTool].size.w,
                                g_nodeArr[index].tools[indexOfTool].size.h);
                            _cxt.drawImage(g_nodeArr[index].tools[indexOfTool].icon.bgTex2D,
                                g_nodeArr[index].pos.x + toolPos.x + g_nodeArr[index].tools[indexOfTool].icon.pos.x + pos.x,
                                g_nodeArr[index].pos.y + toolPos.y + g_nodeArr[index].tools[indexOfTool].icon.pos.y + pos.y);
                        }

                        _cxt.textBaseline = 'top';
                        _cxt.font = '32px Arial';
                        if (g_nodeArr[index].tools[indexOfTool].data) {

                            if (g_nodeArr[index].tools[indexOfTool].data.targetValue && g_nodeArr[index].tools[indexOfTool].data.value != g_nodeArr[index].tools[indexOfTool].data.targetValue) {
                                g_nodeArr[index].tools[indexOfTool].data.value += g_nodeArr[index].tools[indexOfTool].data.intervalValue;
                                if (g_nodeArr[index].tools[indexOfTool].data.intervalValue > 0 && g_nodeArr[index].tools[indexOfTool].data.value > g_nodeArr[index].tools[indexOfTool].data.targetValue) {
                                    g_nodeArr[index].tools[indexOfTool].data.value = g_nodeArr[index].tools[indexOfTool].data.targetValue;
                                } else if (g_nodeArr[index].tools[indexOfTool].data.intervalValue < 0 && g_nodeArr[index].tools[indexOfTool].data.value < g_nodeArr[index].tools[indexOfTool].data.targetValue) {
                                    g_nodeArr[index].tools[indexOfTool].data.value = g_nodeArr[index].tools[indexOfTool].data.targetValue;
                                }
                            }

                            var number = parseInt(g_nodeArr[index].tools[indexOfTool].data.value);
                            if (number > 99) {
                                number = '99+';
                            }

                            if (g_nodeArr[index].tools[indexOfTool].data.color) {
                                _cxt.fillStyle = g_nodeArr[index].tools[indexOfTool].data.color;
                            } else {
                                _cxt.fillStyle = '#F00';
                            }

                            var length = _cxt.measureText(number);
                            // 存在icon
                            var pos = jzcode.h5.gtool.calcPosWHWH(g_nodeArr[index].tools[indexOfTool].data.pos.alignH,
                                g_nodeArr[index].tools[indexOfTool].data.pos.alignV,
                                length.width,
                                40,
                                g_nodeArr[index].tools[indexOfTool].size.w,
                                g_nodeArr[index].tools[indexOfTool].size.h);
                            _cxt.fillText(number,
                                g_nodeArr[index].pos.x + toolPos.x + g_nodeArr[index].tools[indexOfTool].data.pos.x + pos.x,
                                g_nodeArr[index].pos.y + toolPos.y + g_nodeArr[index].tools[indexOfTool].data.pos.y + pos.y);
                        }
                    }
                }
            }

            // render label
            for (var index = 0; index < g_nodeArr.length; index++) {
                if (g_nodeArr[index].label) {
                    for (var indexOfLabel = 0; indexOfLabel < g_nodeArr[index].label.length; indexOfLabel++) {
                        _cxt.drawImage(g_nodeArr[index].label[indexOfLabel].bgTex2D,
                            g_nodeArr[index].pos.x + g_nodeArr[index].label[indexOfLabel].pos.x,
                            g_nodeArr[index].pos.y + g_nodeArr[index].label[indexOfLabel].pos.y);
                    }
                }
            }

            _cxt.textBaseline = 'top';
            _cxt.fillStyle = '#FFF';
            _cxt.font = '120px Arial';
            for (var index = 0; index < g_nodeArr.length; index++) {
                if (g_nodeArr[index].data) {
                    var nodeData = g_nodeArr[index].data;
                    if (g_nodeArr[index].data.targetValue && g_nodeArr[index].data.value != g_nodeArr[index].data.targetValue) {
                        g_nodeArr[index].data.value += g_nodeArr[index].data.intervalValue;
                        if (nodeData.intervalValue > 0 && g_nodeArr[index].data.value > g_nodeArr[index].data.targetValue) {
                            g_nodeArr[index].data.value = g_nodeArr[index].data.targetValue;
                        } else if (nodeData.intervalValue < 0 && nodeData.value < nodeData.targetValue) {
                            nodeData.value = nodeData.targetValue;
                        }
                    }
                    var number = parseInt(g_nodeArr[index].data.value);
                    var length = _cxt.measureText(number);
                    _cxt.fillText(number, g_nodeArr[index].pos.x + (g_nodeArr[index].size.w - length.width) / 2,
                        g_nodeArr[index].pos.y + (g_nodeArr[index].size.h / 2) - 50);
                }
            }

            _cxt.font = '40px Arial';
            var timeString = getNowFormatYYMMDDHHMM();
            var timeLength = _cxt.measureText(timeString);
            _cxt.fillText(timeString, 1920 - timeLength.width - 50, 40);
        }

        // 循环处理数据请求
        function DataLoop(delta) {
            for (var index = 0; index < g_dataList.length; index++) {
                if (g_dataList[index].waiting >= 60000 && !g_dataList[index].isLoading) {
                    var dataEndpoint = g_dataList[index];
                    ajaxToServer(dataEndpoint);
                } else {
                    g_dataList[index].waiting += delta;
                }
            }
        }

        function ajaxToServer(dataEndpoint) {
            // 发送请求到服务器
            dataEndpoint.waiting = 0;
            dataEndpoint.isLoading = true;
            $.ajax({
                url: dataEndpoint.url,
                type: 'GET',
                dataType: 'json',
                timeout: 60000,
                cache: false,
                beforeSend: function () {
                }, //加载执行方法
                error: function () {
                    dataEndpoint.isLoading = false;
                },  //错误执行方法
                success: function (result) {
                    if (result.isSuccess) {
                        // 设置一个目标值，让动画来渐变
                        dataEndpoint.tag.targetValue = result.data;// + Math.random() * 100;
                        if (dataEndpoint.tag.targetValue != dataEndpoint.tag.value) {
                            dataEndpoint.tag.intervalValue = (dataEndpoint.tag.targetValue - dataEndpoint.tag.value) / 3000 * g_interval;
                            if (dataEndpoint.tag.intervalValue > 0 && dataEndpoint.tag.intervalValue < 1) {
                                dataEndpoint.tag.intervalValue = 1;
                            }
                            else if (dataEndpoint.tag.intervalValue < 0 && dataEndpoint.tag.intervalValue > -1) {
                                dataEndpoint.tag.intervalValue = -1;
                            }
                        }
                    }
                    dataEndpoint.isLoading = false;
                }//成功执行方法
            })
        }

        function getNowFormatYYMMDDHHMM() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            var strHour = date.getHours();
            var strMinutes = date.getMinutes();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            if (strHour >= 0 && strHour <= 9) {
                strHour = "0" + strHour;
            }
            if (strMinutes >= 0 && strMinutes <= 9) {
                strMinutes = "0" + strMinutes;
            }
            var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                    + " " + strHour + seperator2 + strMinutes;
            return currentdate;
        }
    </script>
    <script src="./content/s0-charts.js"></script>
    <script src="./content/s0-event.js"></script>
    <script>
        $(document).ready(function () {
            register();
        });
    </script>
</body>
</html>